<template>
    <div>
        <!--dialog-->
        <el-dialog :title="$t('add_user')" :visible.sync="addUserDialog" width="50%" :before-close="close">
            <el-container style="height: 250px">
                <el-aside width="25%">
                    <el-steps :active="addUserDialogData.active" finish-status="success" direction="vertical" style="height: 220px">
                        <el-step :title="$t('UserInfo')"></el-step>
                        <el-step :title="$t('BasicInfo')"></el-step>
                    </el-steps>
                </el-aside>
                <el-main>
                    <el-form :model="userForm" :rules="rules" ref="userForm">
                        <div v-show="addUserDialogData.active === 0">
                            <el-form-item :label="$t('username')" :label-width="formLabelWidth" prop="username">
                                <el-input size="small" v-model="userForm.username" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('password')" :label-width="formLabelWidth" prop="password">
                                <el-input size="small" type="password" v-model="userForm.password" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('passwordAgain')" :label-width="formLabelWidth" prop="passwordAgain">
                                <el-input size="small" type="password" v-model="userForm.passwordAgain" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('selectRoles')" :label-width="formLabelWidth" prop="roles">
                                <el-select v-model="userForm.roles" multiple :placeholder="$t('pleaseSelect')">
                                    <el-option
                                        v-for="item in allRoles"
                                        :key="item.roleId"
                                        :label="item.roleName"
                                        :value="item.roleId">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </div>
                        <div v-show="addUserDialogData.active === 1">
                            <el-form-item :label="$t('phone')" :label-width="formLabelWidth" prop="phone">
                                <el-input size="small" v-model="userForm.phone" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('email')" :label-width="formLabelWidth" prop="email">
                                <el-input size="small" v-model="userForm.email" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-main>
            </el-container>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="addUserPre" v-show="addUserDialogData.active != 0" v-text="$t('Pre')"></el-button>
                <el-button size="small" type="primary" @click="addUserNext('userForm')" v-show="addUserDialogData.active < 1" v-text="$t('Next')"></el-button>
                <el-button size="small" type="primary" @click="createUser" v-show="addUserDialogData.active == 1" v-text="$t('Create')"></el-button>
                <el-button size="small" @click="close" v-text="$t('Cancel')"></el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        props : {
            addUserDialog: false,
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('password_please')));
                }else if(value.length < 6) {
                    callback(new Error(this.$t('password_length_limit')));
                } else {
                    if (this.userForm.checkPass !== '') {
                        this.$refs.userForm.validateField('passwordAgain');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('password_again_tip')));
                } else if (value !== this.userForm.password) {
                    callback(new Error(this.$t('password_diff')));
                } else {
                    callback();
                }
            };
            var validateRoles = (rule, value, callback) => {
                if (value.length == 0) {
                    callback(new Error(this.$t('select_role_tip')));
                } else {
                    callback();
                }
            };
            var validateUsername = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error(this.$t('username_input_tip')));
                } else {
                    callback();
                }
            };
            return {
                allRoles :[],
                userForm : {
                    username : "",
                    password : "",
                    passwordAgain : "",
                    roles : "",
                    phone : "",
                    email : "",
                },

                rules: {
                    username: [{required: true, validator : validateUsername, trigger: 'change'}],//message: this.$t('username_input_tip')
                    password : [{required: true, validator : validatePass, trigger: 'blur' }],
                    passwordAgain : [{required: true, validator : validatePass2, trigger: 'blur' }],
                    roles : [{required: true, validator : validateRoles, trigger: 'blur' }],
                },
                // addUserDialog: false,
                formLabelWidth: '120px',
                addUserDialogData : {
                    active: 0,
                },

            }
        },

        methods: {
            close(){
                let vm = this
                vm.$refs.userForm.resetFields()
                vm.$parent.addUserDialog = false
                vm.addUserDialogData.active = 0;
            },
            handleClose(done) {
            },
            resetForm() {
                let vm = this
                vm.$refs.userForm.resetFields()
                vm.$parent.addUserDialog = false
                vm.addUserDialogData.active = 0;
            },
            addUserPre(){
                let vm = this
                if (vm.addUserDialogData.active > 0){
                    vm.addUserDialogData.active --;
                }
            },
            addUserNext(formName){
                let vm = this
                vm.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(vm.userForm.roles)
                        if (vm.addUserDialogData.active <= 1){
                            vm.addUserDialogData.active ++;
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getRoleData() {
                let vm = this
                vm.$http
                    .get('sys/findAllRoles')
                    .then(function (response) {
                        vm.allRoles = response.data.result
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            createUser(){
                let vm = this;
                vm.$http
                    .post('sys/addSysUser', {
                        user:JSON.stringify(vm.userForm)
                    })
                    .then(function (response) {
                        if(response.data.result){
                            vm.$message({
                                message: vm.$t('Success'),
                                type: 'success'
                            });
                            vm.close();
                            vm.$parent.getUserTableData();
                        }else {
                            vm.$message.error(vm.$t('Failed'));
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
        },
        created: function () {
            let vm = this
            vm.getRoleData();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    /*.el-dialog .el-input{*/
    /*width: 33px;*/
    /*}*/
</style>
